<template>
  <div id="main" style="width: 600px;height:400px;margin: 50px 0 0 50px;"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import { getUserList} from '../../api/userApi.ts'

onMounted(async () => {
  try {
    const res = await getUserList();
    console.log(res);
    
    var male = 0;
    var female = 0;

    for (let i = 0; i < res.length; i++) {
      if (res[i].role != 0) {
        if (res[i].gender) {
          male++;
        } else {
          female++;
        }
      }
    }


  } catch (error) {
    console.log("获取用户列表失败");
  }
  const chartDom = document.getElementById('main');
  if (!chartDom) return;

  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '男女比例图',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '性别',
        type: 'pie',
        radius: '50%',
        data: [
          { value: male, name: '男性' },
          { value: female, name: '女性' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

  if (option) {
    myChart.setOption(option);
  }
});
</script>

<style scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>
